<template>
<div>
  <!--第一部分-->
  <el-card class="box-card" style="margin: 20px 0px">
    <!--三级联动 全局组件-->
    <CategorySelect @getCategoryId="getCategoryId" :show="scene===0"/>
  </el-card>
  <!--第二部分-->
  <el-card class="box-card">
    <!--展示Spu列表的结构-->
    <div v-show="scene===0">
      <el-button type="primary" icon="el-icon-plus" @click="addSpu" :disabled="!category3Id">添加SPU</el-button>
      <el-table :data="records" style="width: 100%" border>
        <!--序号-->
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <!--SPU的名称-->
        <el-table-column prop="spuName" label="SPU的名称" width="width"></el-table-column>
        <!--SPU的描述-->
        <el-table-column prop="description" label="SPU的描述" width="width"></el-table-column>
        <!--操作-->
        <el-table-column label="操作" width="width">
          <template slot-scope="{row,$index}">
            <hint-button type="success" icon="el-icon-plus" size="mini" title="添加spu" @click="addSku(row)"></hint-button>
            <hint-button type="warning" icon="el-icon-edit" size="mini" title="修改spu" @click.native="updateSpu(row)"></hint-button>
            <hint-button type="info" icon="el-icon-info" size="mini" title="查看当前spu的全部列表" @click="handler(row)"></hint-button>
            <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deleteSpu(row)">
              <hint-button type="danger" slot="reference" icon="el-icon-delete" size="mini" title="删除"></hint-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--分页器-->
      <el-pagination
        style="text-align: center;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=page
        :page-sizes="[3, 5, 10]"
        :page-size=limit
        layout="prev, pager, next, jumper,->,total, sizes "
        :total=total>
      </el-pagination>
    </div>
    <!--添加或者修改Spu的结构-->
    <SpuForm v-show="scene===1" @changeScene="changeScene" ref="spu"/>
    <!--添加Spu实例的结构-->
    <SkuForm v-show="scene===2" @changeScenes="changeScenes" ref="sku"/>
    <!--查看sku列表-->
    <el-dialog :title="`${spu.spuName}的列表`" :default-close="close" :visible.sync="dialogTableVisible">
      <el-table :data="skuList" v-loading="loading">
        <el-table-column property="skuName" label="名称" width="150"></el-table-column>
        <el-table-column property="price" label="价格" width="200"></el-table-column>
        <el-table-column property="weight" label="重量"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="{row}">
            <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</div>
</template>

<script>
import SpuForm from './SpuForm/index'
import SkuForm from './SkuForm/index'
export default {
  name: 'spu',
  components:{SpuForm,SkuForm},
  data(){
    return{
      dialogTableVisible:false,//对话框的显示与隐藏 sku列表
      spu:[],//用于显示sku列表的信息
      skuList:[],//用于显示sku列表的信息
      loading:true,//加载效果
      //分类ID
      category1Id:'',
      category2Id:'',
      category3Id:'',
      records:[],//获取到的Spu列表
      testRecords:[{ 'spuName': 'test', 'description': '哈哈' }],//测试数据
      total:0,//获取到Spu的总数
      page:1,//当前页
      limit:3,//每页展示几条数据
      scene:0,//0:展示spu 1:添加|修改 2:添加sku
    }
  },
  methods:{
    //分页每页大小发生变化
    handleSizeChange(limit){
      this.limit = limit
      this.getSpuList()
    },
    //分页页数被点击
    handleCurrentChange(page){
      this.page = page
      this.getSpuList()
    },
    //三级联动自定义事件 将子组件的数据传给父组件
    getCategoryId(cForm){
      this.category1Id = cForm.category1Id
      this.category2Id = cForm.category2Id
      this.category3Id = cForm.category3Id
      if (this.category3Id) {
        this.getSpuList()
      }
    },
    //获取Spu请求
    async getSpuList(){
      try {
        const {page,limit,category3Id} = this
        let res = await this.$API.spu.reqGetSpuList(page,limit,category3Id)
        if (res.code === 200){
          this.total = res.data.total
          if (res.data.records.length<1){
            this.records = this.testRecords
          }else{
            this.records = res.data.records
          }
        }
      }catch (e) {
        alert(e.message)
      }
    },
    //添加Spu
    addSpu(){
      this.scene = 1
      //通知子组件发请求 两个  把三级分类id传给子组件
      this.$refs.spu.addSpuData(this.category3Id)
    },
    //修改Spu
    updateSpu(row){
      this.scene = 1
      //调用子组件的初始化方法
      this.$refs.spu.initSpuData(row)
    },
    //spuForm子组件取消按钮
    changeScene(scene,flag){
      //flag:区分修改和添加
      this.scene = scene
      if (flag==='修改'){
        this.getSpuList(this.page)
      }else{
        this.getSpuList()
      }
    },
    //skuForm取消按钮
    changeScenes(scene){
      this.scene = scene
    },
    //删除SPU
    async deleteSpu(row){
      //由于当时没有数据 所以假设row.id为1
      let res = await this.$API.spu.reqDeleteSpu(1)
      if (res.code===200){
        this.$message({ type: 'success', message: 'success' })
        this.getSpuList(this.records.length > 1?this.page:this.page-1)
      }else{
        this.$message({ type: 'info', message: 'fail' })
        this.getSpuList()

      }
    },
    //添加Sku按钮
    addSku(row){
      //切换场景
      this.scene = 2
      //父组件调用子组件的方法,让子组件发请求-3个请求
      this.$set(row,'category3Id',this.category3Id)
      this.$refs.sku.getData(this.category1Id,this.category2Id,row)
    },
    //查看sku按钮
    async handler(spu){
      this.dialogTableVisible = true
      this.spu = spu
      //假设spu.id=1 因为没有数据
      let res = await this.$API.spu.reqSkuList(1)
      if (res.code === 200){
        this.skuList = res.data
        this.loading = false//隐藏加载效果
      }
    },
    //对话框关闭按钮
    close(done){
      //再次初始化数据
      this.loading = true
      //防止数据回显
      this.skuList = []
      //关闭对话框
      done()
    }
  }
}
</script>

<style scoped>

</style>
